<!doctype html>
<html class="no-js">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="description" content="">
    <meta name="keywords" content="">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>芝麻街</title>
    <!-- Set render engine for 360 browser -->
    <meta name="renderer" content="webkit">
    <!--css样式列表-->
    <link rel="stylesheet" href="css/amazeui.min.css">
    <link rel="stylesheet" href="css/app.css">
    <!--js脚本列表-->
    <script src="js/jquery.min.js"></script>
    <script src="js/amazeui.min.js"></script>
    <script src="js/app.js"></script>
    <!--必要JS（自适应手机端 px -> rem ）-->
    <script>
        !function(e) {
            function t(a){if(i[a])return i[a].exports;var n=i[a]={exports: {
            },id:a,loaded:!1
            };
                return e[a].call(n.exports,n,n.exports,t),n.loaded=!0,n.exports
            }
            var i= {
            };
            return t.m=e,t.c=i,t.p="",t(0)
        }([function(e,t) {
            "use strict"
            ;Object.defineProperty(t,"__esModule",{value: !0
            });
            var i=window;t["default"]=i.flex=function(e,t) {
                var a=e||100,n=t||1,r=i.document,o=navigator.userAgent,d=o.match(/Android[\S\s]+AppleWebkit\/(\d{3})/i),l=o.match(/U3\/((\d+|\.) {5,})/i),c=l&&parseInt(l[1].split(".").join(""),10)>=80,p=navigator.appVersion.match(/(iphone|ipad|ipod)/gi),s=i.devicePixelRatio||1;p||d&&d[1]>534||c||(s=1);var u=1/s,m=r.querySelector('meta[name="viewport"]');m||(m=r.createElement("meta"),m.setAttribute("name","viewport"),r.head.appendChild(m)),m.setAttribute("content","width=device-width,user-scalable=no,initial-scale="+u+",maximum-scale="+u+",minimum-scale="+u),r.documentElement.style.fontSize=a/2*s*n+"px"
            },e.exports=t["default"]
        }]);
        flex(100, 1);
    </script>
    <!------------------------>
</head>
<body>
<div class="LoginRegisterHeader">
    <div class="BackBtn"><a href="javascript:history.go(-1)"><img src="images/return.png" alt="返回"/></a></div>
    <div class="LoginRegisterHeaderTitle">注册</div>
</div>
<form action="">
    <div class="LoginRegisterMian RegisterBg">
        <div class="RegisterParentBox">
            <div class="RegisterBox">
                <div class="LoginBoxTitle">用户注册</div>
                <div class="LoginBoxInput">
                    <input type="text" value="" name="name" placeholder="请输入您的手机号"/>
                </div>
                <div class="LoginBoxInput">
                    <input class="verificationCodeInput" type="password" value="" name="password" placeholder="请输入您的验证码"/>
                    <button class="verificationCodeBtn gradualBg">获取验证码</button>
                </div>
                <div class="LoginBoxInput">
                    <input type="password" value="" name="password" placeholder="请输入您的密码"/>
                </div>
                <div class="LoginBoxInput">
                    <input type="text" value="" name="text" placeholder="请输入您的邀请码"/>
                </div>
                <div class="LoginBoxBtn">
                    <input type="submit" id="submit" value="完成" disabled="true" >
                </div>
            </div>
        </div>
        <div class="RegisterTip">
            注册即代表您同意
            <a class="dmColor" href="#">《用户协议》</a>
            <a class="dmColor" href="#">《隐私条款》</a>
        </div>
    </div>
</form>
<script type="text/javascript">
    var countdown=60;
    $(document).on('click','.verificationCodeBtn',function(){
        var obj = $(this)
        settime(obj)
    })
    function settime(obj) { //发送验证码倒计时
        if (countdown == 0) {
            obj.attr('disabled',false);
            obj.addClass("gradualBg");
            obj.text("获取验证码");
            countdown = 60;
            return;
        } else {
            obj.attr('disabled',true);
            obj.removeClass("gradualBg");
            obj.text("重新发送(" + countdown + ")");
            countdown--;
        }
        setTimeout(function() {settime(obj) },1000)
    }

    //验证
    var bol= false;

    $(document).on('blur','.LoginBoxInput input',function(){
        inputchange()
        var obj =$('#submit')
        if(!bol){
            obj.attr('disabled',false);
            obj.addClass("gradualBg");
        }else{
            obj.attr('disabled',true);
            obj.removeClass("gradualBg");
        }
    })
    function inputchange(){
        $('.LoginBoxInput').each(function(){
            var that = $(this)
            var val =that.find('input').val()
            if(val.length<=0){
                bol = true
            }else{
                bol = false
            }
        })
    }

    $("form").submit(function(e){
        if($('input[name="name"]').val().length<=6){
            $('input[name="name"]').parent(".LoginBoxInput").css("border-bottom-color","red")
            return false
        }else{
            $('input[name="name"]').parent(".LoginBoxInput").css("border-bottom-color","#F3F3F3")
        }
    });




</script>
</body>
</html>